import React from 'react';
import {Row, Col, Form, InputNumber, Input, Button, Table, Select, Modal, Popconfirm, message, Tabs} from 'antd';
const R = require('ramda');
const TabPane = Tabs.TabPane;
import OperatorConstant from "../../utils/OperatorConstant";

const FormItem = Form.Item;


export default Form.create({wrappedComponentRef: true})(class EditBookOrder extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                open: false,
                disabled: true,
                type: "",
            }
        }

        handleCancel = () => {
            this.props.form.resetFields()
            this.setState({open: false})
            this.props.dispatch({
                type: 'bookorder/setBookorder',
                payload: {
                    dataSource: {},
                }
            });

            this.props.dispatch({
                type: 'bookorder/setApprovalList',
                payload: {
                    approvalList: [],
                }
            });
        }

        handleOpen = (type) => {
            this.state.type = type;
            this.setState({open: true})
        }

        handleConfirm = () => {
            this.props.form.validateFields((errors, values) => {
                let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource
                if (errors) return;

                if (this.state.type == OperatorConstant.view) {
                    return;
                }

                let approvalmemo = values.approvalmemo;
                if(values.approvalresult == 3){
                    if(R.isEmpty(approvalmemo)){
                        message.error("请先写审核备注");
                        return;
                    }
                }




                this.props.dispatch({
                    type: "bookorder/approvalBookOrder",
                    payload: {
                        id: dataSource.id,
                        approvalresult: values.approvalresult,
                        approvalmemo: values.approvalmemo,
                        onSuccess: ()=> {
                            this.props.handleSearch();
                            this.handleCancel();
                        }

                    }
                })


            })
        }

        columns = [
            {title: '审核单号', dataIndex: 'id', key: 'id'},
            {title: '结果', dataIndex: 'statusDesc', key: 'statusDesc'},
            {title: '审核人', dataIndex: 'creatorName', key: 'creatorName'},
            {title: '审核时间', dataIndex: 'createtime', key: 'createtime'},
            {title: '备注', dataIndex: 'memo', key: 'memo'}];

        render() {
            const {getFieldDecorator} = this.props.form;
            const formItemLayout = {labelCol: {xs: {span: 8}, sm: {span: 8}}, wrapperCol: {xs: {span: 15}, sm: {span: 14}}};
            let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;

            let footer = [];

            this.state.type == OperatorConstant.approval ? footer.push(<Button size="large"
                                                                               onClick={this.handleConfirm.bind(this, true)}>审核</Button>) : "";

            footer.push(<Button key="cancel" size="large" onClick={this.handleCancel.bind(this, true)}>取消</Button>);


            return (
                <Modal visible={this.state.open} title={"预约下单"} width={800} wrapClassName="vertical-center-modal"
                       footer={footer} onOk={this.handleConfirm} onCancel={this.handleCancel}>
                    <Form>
                        <Row>
                            <Col span={30}>
                                <FormItem {...{labelCol: {sm: {span: 4}}, wrapperCol: {sm: {span: 19}}}}
                                          label="	产品名称"
                                          hasFeedback>
                                    {getFieldDecorator('name', {
                                        initialValue: dataSource.productname
                                    })(
                                        <Input maxLength="100" disabled={true}/>
                                    )}
                                </FormItem></Col>

                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="预计出货时间" hasFeedback>
                                    {getFieldDecorator('address', {
                                        initialValue: dataSource.exporttime
                                    })(
                                        <Input maxLength="100" disabled={true}/>
                                    )}
                                </FormItem></Col>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="预计出口金额" hasFeedback>
                                    {getFieldDecorator('country', {
                                        initialValue: R.isNil(dataSource.exportamt) ? '' : dataSource.exportamt + ''
                                    })(
                                        <Input maxLength="200" disabled={true}/>
                                    )}
                                </FormItem></Col>
                        </Row>
                        <Row>

                            <Col span={12}>
                                <FormItem {...formItemLayout} label="联系人" hasFeedback>
                                    {getFieldDecorator('linkman', {
                                        initialValue: dataSource.contractor
                                    })(
                                        <Input maxLength="30" disabled={true}/>
                                    )}
                                </FormItem></Col>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="联系方式" hasFeedback>
                                    {getFieldDecorator('country', {
                                        initialValue: R.isNil(dataSource.telephone) ? '' : dataSource.telephone + ''
                                    })(
                                        <Input maxLength="30" disabled={true}/>
                                    )}
                                </FormItem></Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="备注" hasFeedback>
                                    {getFieldDecorator('linkman', {
                                        initialValue: dataSource.memo
                                    })(
                                        <Input maxLength="30" disabled={true}/>
                                    )}
                                </FormItem></Col>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="电话" hasFeedback>
                                    {getFieldDecorator('telephone', {
                                        rules: [{
                                            required: false, message: '请输入电话'
                                        }],
                                        initialValue: R.isNil(dataSource.telephone) ? '' : dataSource.telephone
                                    })(
                                        <Input maxLength="30" disabled={true}/>
                                    )}
                                </FormItem></Col>
                        </Row>
                        <Tabs tabPosition={'top'}>
                            <TabPane tab="预约下单审核" key="1">
                                {this.state.type == OperatorConstant.approval ?
                                    <Row>
                                        <Col span={12}>
                                            <FormItem
                                                {...formItemLayout}
                                                label="请选择审核结果"
                                                hasFeedback
                                            >
                                                {getFieldDecorator('approvalresult', {
                                                    rules: [{
                                                        required: true, message: '请选择审核结果！',
                                                    }],
                                                    initialValue: ""
                                                })(
                                                    <Select>
                                                        <Option value=""></Option>
                                                        <Option value="2">已处理</Option>
                                                        <Option value="3">已拒绝</Option>
                                                    </Select>
                                                )}
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem
                                                {...formItemLayout}
                                                label="备注"
                                                hasFeedback
                                            >
                                                {getFieldDecorator('approvalmemo', {
                                                    rules: [{
                                                        required: false, message: '请输入备注！',
                                                    }],
                                                    initialValue: ""
                                                })(
                                                    <Input />
                                                )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    : ""}

                                {this.state.type == OperatorConstant.view ?
                                    <Table rowKey="id"
                                           dataSource={R.isNil(this.props.approvalList) ? [] : this.props.approvalList}
                                           columns={this.columns} bordered={true} size={'middle'} pagination={false}/>
                                    : ""}

                            </TabPane>
                        </Tabs>
                    </Form>
                </Modal>
            );
        }
    }
)


// WEBPACK FOOTER //
// ./public/src/components/order/components/EditBookOrder.js